//轮播图
var mySwiper = new Swiper(".swiper-container", {
  // direction: "vertical", // 垂直切换选项
  loop: true, // 循环模式选项
  // effect: "flip",
  autoplay: true,
  parallax: true,
  // 如果需要分页器
  pagination: {
    el: ".swiper-pagination",
    // clickable: true,
  },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
//鼠标移动上，前进后退按钮出现
// document.querySelector(".banner").onmouseover = function () {
//   $(".swiper-button-white").css("opacity", 1);
// };
// document.querySelector(".banner").onmouseout = function () {
//   $(".swiper-button-white").css("opacity", 0);
// };
$(".banner").hover(
  function () {
    $(".swiper-button-white").css("opacity", 1);
  },
  function () {
    $(".swiper-button-white").css("opacity", 0);
  }
);
//菜单和内容分栏显示
let menuLi = document.querySelectorAll(".menu li");
let contentLi = document.querySelectorAll(".content li");
$(".menu").hover(
  function () {
    $(".content").css("display", "block");
  }
  // function () {
  //   $(".content").css("display", "none");
  // }
);
$(".banner aside").hover(
  function () {},
  function () {
    $(".content").css("display", "none");
  }
);
menuLi.forEach(function (v, i) {
  //   console.log(v, i);
  v.onmouseover = function () {
    contentLi.forEach(function (v2) {
      v2.style.display = "none";
    });

    contentLi[i].style.display = "block";
  };
});
// #time2的倒计时
var timer = setInterval(function () {
  countdown("2021/10/10 14:00:00", "#time2");
}, 1000);
// #time3的倒计时
var timer = setInterval(function () {
  countdown("2021-10-10 18:00:00", "#time3");
}, 1000);
// #time4的倒计时
var timer = setInterval(function () {
  countdown("2021-10-10 22:00:00", "#time4");
}, 1000);

//首页所有的商品列表
// http://jx.xuzhixiang.top/ap/api/productlist.php
// 热门商品列表
class ShopList {
  constructor() {
    // this.youlist = document.querySelectorAll(".you-goods-list");
    this.refershYouShop(); //执行刷新商品列表
    // console.log(this.youlist);
  }
  //刷新商品列表
  refershYouShop() {
    $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", function (data) {
      console.log(data);
      let arr = data.data;
      console.log(arr);
      let str = ""; //拼接字符串
      arr.forEach(function (v, i) {
        // console.log(v, i);
        str += `<a class="flex hover-shadow" href="detail.html?pid=${v.pid}&pname=${v.pname}">
        <img src="${v.pimg}" alt="" />
        <div>
          <p class="name elli">${v.pname}</p>
          <p class="desc elli">${v.pdesc}</p>
          <p class="price">￥${v.pprice}</p>
        </div>
       </a>`;
      });
      // console.log(str);
      // this.youlist.innerHTML = str;
      $(".you-goods-list").html(str);
    });
  }
}
new ShopList();
//跳转到上传商品页面
function touploadshop() {
  if (localStorage.getItem("username")) {
    location.href = "uploadshop.html";
  } else {
    alert("请先登录");
  }
}
//右边侧边栏定位和出现
window.onscroll = function () {
  // $(".sidebar").css("top", document.documentElement.scrollTop);
  let top = parseInt(document.documentElement.scrollTop);
  // console.log(top);
  if (top < 600) {
    $(".sidebar").css("bottom", top - 400);
  } else {
    $(".sidebar").css("bottom", 200);
  }
};
//回到顶部
function toTop() {
  document.documentElement.scrollTop = 0;
}
//oppo页面分栏
let oppoLiArr = document.querySelectorAll(".oppo ul li a");
// console.log(oppoLiArr);
let oppoContArr = document.querySelectorAll(".oppo-c");
// console.log(oppoContArr);
oppoLiArr.forEach(function (v, i) {
  // console.log(v, i);
  v.onclick = (e) => {
    e.preventDefault(); //阻止a标签的默认行为
    console.log(i);
    oppoLiArr.forEach((v2) => {
      v2.style.fontWeight = "500";
      v2.style.color = "rgb(119, 116, 116)";
    });
    v.style.fontWeight = "bold";
    v.style.color = "#000";
    oppoContArr.forEach((item) => {
      item.style.display = "none";
    });
    oppoContArr[i].style.display = "flex";
  };
});
//oneplue页面分栏
let oneplueLiArr = document.querySelectorAll(".oneplue ul li a");
// console.log(oppoLiArr);
let oneplueContArr = document.querySelectorAll(".oneplue-c");
// console.log(oppoContArr);
oneplueLiArr.forEach(function (v, i) {
  // console.log(v, i);
  v.onclick = (e) => {
    e.preventDefault(); //阻止a标签的默认行为
    console.log(i);
    oneplueLiArr.forEach((v2) => {
      v2.style.fontWeight = "500";
      v2.style.color = "rgb(119, 116, 116)";
    });
    v.style.fontWeight = "bold";
    v.style.color = "#000";
    oneplueContArr.forEach((item) => {
      item.style.display = "none";
    });
    oneplueContArr[i].style.display = "flex";
  };
});
